<template>
  <canvas id="canvas" :width="clientWidth" :height="clientHeight"></canvas>
</template>

<script>
export default {
  name: 'canvas-chart',
  props: ['msg'],
  data () {
    return {
      percent: document.documentElement.clientWidth / 7.5,
      clientWidth: 6.8 * document.documentElement.clientWidth / 7.5,
      clientHeight: 4.6 * document.documentElement.clientWidth / 7.5,
      bigSize: 0,
      dotList: [],
      xLength: 0,
      yLength: 0,
      yNumber: 0,
      ySzie: 4
    }
  },
  watch: {
    msg: function () {
      this.firstFun()
      let canvas = document.getElementById('canvas')
      let ct = canvas.getContext('2d')
      ct.fillStyle = '#fff'
      ct.fillRect(0, 0, this.clientWidth, this.clientHeight)
      ct.fill()
      let padding = this.percent * 0.6 // 坐标轴到canvas边框的边距，留边距写文字
      this.drawXY(ct, padding)
      this.drawCut(ct, this.msg, this.clientWidth, this.clientHeight, padding)
      this.drawChartLine(ct, padding)
    }
  },
  methods: {
    drawXY: function (ct, padding) {
      ct.beginPath()
      ct.save()
      ct.strokeStyle = '#000'
      ct.strokeWidth = 1
      // y轴线
      ct.lineTo(padding, this.clientHeight - padding)
      ct.lineTo(padding, padding)
      // x轴线
      ct.moveTo(padding, this.clientHeight - padding)
      ct.lineTo(this.clientWidth - padding, this.clientHeight - padding)
      // 箭头2
      ct.moveTo(this.clientWidth - padding - 6, this.clientHeight - padding - 4)
      ct.lineTo(this.clientWidth - padding, this.clientHeight - padding)
      ct.lineTo(this.clientWidth - padding - 6, this.clientHeight - padding + 4)
      // 箭头
      ct.moveTo(padding - 4, padding + 6)
      ct.lineTo(padding, padding)
      ct.lineTo(padding + 4, padding + 6)
      ct.stroke()
      ct.restore()
    },
    drawCut: function (ct, data, width, height, padding) {
      ct.save()
      ct.textAlign = 'center'
      ct.fillStyle = '#000'
      ct.font = '10px Arial'
      // x轴值
      for (let i = 0; i < 9; i++) {
        // let xAxis = 3 * i + 1 + '-' + (3 * i + 3)
        let xAxis = 3 * i + 3
        let xlen = this.xLength * (i + 1)
        ct.fillText(xAxis, padding + xlen, height - padding + 15) // 填充文字
      }
      let xlen = this.xLength * 10
      ct.fillText('31', padding + xlen, height - padding + 15) // 填充文字
      // ct.fillText('27-31', padding + xlen - this.xLength / 2, height - padding + 15) // 填充文字
      // y轴值
      for (let i = 0; i < this.ySzie; i++) {
        let y = this.yNumber * (i + 1)
        let ylen = this.yLength * (i + 1) / 1.4
        ct.fillText(y, padding - 15, height - padding - ylen + 5)
      }
      ct.restore()
    },
    drawChartLine: function (ct, padding) {
      let yHeight = this.yLength * (this.ySzie + 1) / 1.4
      let yNum = this.yNumber * (this.ySzie + 1)
      let xMinLength = Math.floor((this.clientWidth - padding * 2) / 33) // x轴每段的真实长度
      ct.beginPath()
      ct.lineTo(padding, this.clientHeight - padding)
      for (let i = 0; i < this.msg.length; i++) {
        let xlen = xMinLength * (i + 1)
        let ylen = this.msg[i].flow / yNum * yHeight
        this.dotList[i] = {'x': padding + xlen, 'y': this.clientHeight - padding - ylen}
        ct.lineTo(padding + xlen, this.clientHeight - padding - ylen)
      }
      ct.lineTo(padding + xMinLength * 30, this.clientHeight - padding)
      ct.closePath()
      ct.strokeStyle = '#adadad'
      ct.lineJoin = 'miter'
      ct.fillStyle = '#addcfd'
      ct.fill()
      ct.stroke()
      this.drawPoint(ct)
    },
    drawPoint: function (ct) {
      ct.fillStyle = '#fff'
      for (let i = 0; i < this.dotList.length; i++) {
        ct.beginPath()
        ct.arc(this.dotList[i].x, this.dotList[i].y, 3, 0, Math.PI * 2, false)
        ct.closePath()
        ct.fill()
      }

      ct.fillStyle = '#0bc2f7'
      for (let i = 0; i < this.dotList.length; i++) {
        ct.beginPath()
        ct.arc(this.dotList[i].x, this.dotList[i].y, 2, 0, Math.PI * 2, false)
        ct.closePath()
        ct.fill()
      }
    },
    firstFun: function () {
      this.ySzie = 4 // y轴的段数
      let big = 0
      let padding = this.percent * 0.6
      for (let i = 0; i < this.msg.length; i++) {
        if (this.msg[i].flow > big) {
          big = this.msg[i].flow
        }
      }
      this.xLength = Math.floor((this.clientWidth - padding * 2) / 11) // x轴每段的真实长度
      this.yLength = Math.floor((this.clientHeight - padding * 2) / (this.ySzie - 1)) // y轴每段的真实长度
      this.yNumber = Math.floor((big) / 3)
    }
  }
}
</script>

<style scoped>

</style>
